<template>
  <div class="bind_container">
    <nut-tabs v-model="tab_id">
      <nut-tab-pane :title="t('menu_normal_modify_passwd')" pane-key="1">
        <routine></routine>
      </nut-tab-pane>
      <nut-tab-pane :title="t('menu_phone_modify_passwd')" pane-key="2">
        <mobileModify v-if="info.mobile"></mobileModify>
        <div v-else class="bind">
          {{ t("home_page_unbind_email_info") }}

          <nut-button
            class="submit"
            @click="router.push('/securitySettings/bindPhone')"
            >{{ t("btn_label_next") }}</nut-button
          >
        </div>
      </nut-tab-pane>
      <nut-tab-pane :title="t('menu_email_modify_passwd')" pane-key="3">
        <emailModify v-if="info.email" style="height: 100%;"></emailModify>
        <div v-else class="bind">
          {{ t("home_page_unbind_email_info") }}

          <nut-button
            class="submit"
            @click="router.push('/securitySettings/bindEmail')"
            >{{ t("btn_label_next") }}</nut-button
          >
        </div>
      </nut-tab-pane>
    </nut-tabs>
    <Toast v-model:visible="securityshowToast">{{ toast_value }}</Toast>
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue";
import routine from "./components/routine.vue";
import emailModify from "./components/emailModify.vue";
import mobileModify from "./components/mobileModify.vue";
import commonHooks, { securityshowToast, toast_value } from "../commonHooks";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

const Toast = defineAsyncComponent(() => import("@/components/Toast.vue"));

const tab_id = ref(1);
const router = useRouter();
const { info } = commonHooks();
const { t } = useI18n();
</script>

<style lang="scss" scoped>
@import url(../style.scss);
</style>
